<template>
    <div>
        <div class="common-layout">
    <el-container>
      <el-header width=100% style="background-color: black;">
        <div style="color: #fff;display: flex; justify-content: space-between; align-items: center; height: 100%;"  >
            <div style="font-size: 20px; display: flex; align-items: center;" >
                <p>蜗牛商城</p>
                <p style="font-size:10px; margin-left: 15px" >欢迎你:{{ userInfo.account }}</p>
                 <img :src="`http://jacklv.cn/images/${userInfo.imgUrl}`" alt="" style="width: 50px;height: 50px;border-radius: 50%; margin-left: 20px;">
            </div>
            <div style="display: flex; color: #ccc;font-size: 15px; color: #ccc; cursor: pointer;" class="bklogin">
                <div style="margin-right: 20px;" @click="profile">个人中心</div>
                <div @click="outlogin" >退出</div>
            </div>
        </div>
    
    </el-header>
      <el-container >
        <el-aside width="200" style="height: 100vh;">
          <el-menu :default-active="route.path" router>
            <template v-for="item in showedMenus" :key="item.path">
              <el-menu-item v-if="!item.children" :index="item.path">
            <el-icon>
                    <document />
            </el-icon>
            <span>{{ item.title }}</span>
    </el-menu-item>
    <el-sub-menu v-else :index="item.path">
            <template #title>
                    <el-icon>
                            <location />
                    </el-icon>
                    <span>{{ item.title }}</span>
            </template>
            <el-menu-item  v-for="m in item.children" :index="m.path" :key="m.path">{{ m.title}} </el-menu-item>
           
    </el-sub-menu>
            </template>
  

            </el-menu>

        </el-aside>
        <el-main><router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
    </div>
</template>
    
<script setup lang='ts'>
 
import {  ElMessageBox } from 'element-plus'
import { useRouter ,useRoute} from 'vue-router'
import { onMounted,ref } from 'vue'
import {eventBus} from "../util/eventBus"
import { menus } from '../configs/sideMenus'
import {filterData} from "../util/global"


onMounted(()=>{

  eventBus.addListener('syncUserInfo',()=>{
      userInfo.value=JSON.parse(localStorage.userInfo)
  })
})

const route = useRoute()
  //拿到用户信息
  const userInfo=ref(JSON.parse(localStorage.userInfo))
  const showedMenus  =  filterData(menus,userInfo.value.role);

const router=useRouter()

  //退出登录
  function outlogin(){
    ElMessageBox.confirm(
    '您确定退出吗?',
    
    {
     
      type: 'warning',
      "closeOnClickModal":false
    }
  )
    .then(() => {
     localStorage.clear()
     router.push('/login')
    })
  
  }
  //跳转个人中心
  function profile(){
    router.push('/nav/profile')
  }

</script>
    
<style scoped lang="scss">
    .el-menu{
        width: 200px;
      /* height: 100vh; */
    }
    .mb-2{
        width: 100%;
        text-align: center;

        font-size: 15px;
        margin-top: 10px;
    }
    

    .common-layout{
      .el-container{
        .el-header{
      .bklogin{
        div:hover{
          color: pink;
        }
      }
    }
    
      }
    }
    
</style>